<template>
    <div class="large-right2 large-panel" @click="openChild">
        <div class="top-title">
            <img class="title-ico" src="@/assets/large/panel-title-ico.png" />
            用户分析
        </div>
        <div id="right2Chart"></div>
        <Right2childVue :visible="childVisible" @closeModal="() => childVisible = false" v-if="childVisible" />
    </div>
</template>

<script lang="ts">
import { echartLoad, toDecimalNoZero } from "@/utils";
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import Right2childVue from "../child/right2child.vue";

@Component({
    name: "home",
    components: { Right2childVue },
})
export default class extends Vue {
    @Prop({ default: () => {} }) pageData!: any;
    @Watch("pageData")
    pageDataChange() {
        this.setPageData();
    }
    loading = false;

    childVisible = false;
    openChild() {
        this.childVisible = true;
    }
    dataList: any[] = [];
    mounted() {
        this.setPageData();
    }
    beforeDestroy() {
        this.timer && clearInterval(this.timer);
    }
    maxData = 0;
    setPageData() {
        if (!this.pageData || !this.pageData.ageStatistics) return;
        this.dataList = this.pageData.ageStatistics.map((item) => ({
            name: item.ageRange,
            val: item.count,
        }));
        let max = 0;
        this.dataList.forEach((item) => {
            const val = Number(item.val);
            if (val > max) max = val;
        });
        this.maxData = Number(max + max * 0.1);

        echartLoad(() => {
            this.setChart();
        });
    }
    currentIndex = -1;
    timer: any = null;
    chartAnimation() {
        const options = this.chart.getOption();
        options.series = this.getSeries(true);
        this.chart.setOption(options);
        setTimeout(() => {
            options.series = this.getSeries(false);
            this.chart.setOption(options);
        }, 50);
    }
    chart: any = null;
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
            // 启动定时器（每 10 秒切换一次）
            this.timer = setInterval(this.chartAnimation, 10000);

            // // 鼠标悬停时暂停自动切换
            this.chart.on("mouseover", () => clearInterval(this.timer));
            this.chart.on("mouseout", () => {
                this.timer = setInterval(this.chartAnimation, 10000);
            });
        }
    }
    resetChart() {
        const options = this.chart.getOption();
        options.series = this.getSeries(false);
        options.radar = this.getRadar();
        this.chart.setOption(options, true);
    }
    initChart() {
        const chartDom = document.getElementById("right2Chart");
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        const options: any = {
            animation: true,
            grid: {
                top: 100,
                bottom: 100,
            },
            radar: this.getRadar(),
            series: this.getSeries(false),
        };
        if (chartDom) {
            this.chart = window.echarts.init(chartDom as HTMLDivElement);
            this.chart.setOption(options);
        }
    }

    getRadar() {
        return {
            // shape: 'circle',
            startAngle: "60",
            radius: "60%",
            axisName: {
                formatter: function (value, indicator) {
                    return `{val|${indicator.val}人}\n{title|${value}}`;
                },
                rich: {
                    title: {
                        color: "#fff",
                        fontSize: 12,
                        lineHeight: 15,
                    },
                    val: {
                        color: "#00C6E1",
                        fontSize: 14,
                        fontWeight: "bold",
                        lineHeight: 15,
                    },
                },
            },
            indicator: this.dataList.map((item) => {
                return { name: item.name, max: this.maxData, val: item.val };
            }),
            axisLine: {
                lineStyle: {
                    color: "rgba(200, 200, 200, 0.2)", // 坐标轴线颜色
                },
            },
            axisLabel: {
                color: "rgba(200, 200, 200, 0.5)", // 坐标轴标签颜色
            },
            splitLine: {
                lineStyle: {
                    color: "rgba(200, 200, 200, 0.2)", // 分割线颜色
                },
            },
            splitArea: {
                areaStyle: {
                    color: ["rgba(0, 224, 255, 0.2)", "rgba(0, 224, 255, 0.3)"],
                },
            },
        };
    }
    getSeries(type) {
        return [
            {
                name: "科技成果",
                type: "radar",
                areaStyle: {
                    color: "rgba(0, 224, 255, 0.8)", // 修改填充颜色
                },
                lineStyle: {
                    color: "rgba(255, 255, 255, 0)", // 线条颜色
                    width: 1,
                },
                itemStyle: {
                    opacity: 0,
                },
                data: type ? [] : [{ value: this.dataList.map((item) => item.val) }],
                animationDuration: 3000,
                animationEasing: "elasticOut",
            },
        ];
    }
}
</script>
<style lang="scss">
.large-right2 {
    #right2Chart {
        width: 100%;
        height: 18vh;
    }
    .top-title {
        display: flex;
        align-items: center;
        font-size: 18px;
        color: #3ad3c1;
        font-weight: bold;
        margin-bottom: 10px;
    }
    .title-ico {
        width: 30px;
        margin-right: 10px;
    }
}
</style>
